<template>
	<div class="BaseimgPicker">
		<img class="layer-select-img" :src="layerSelectImgSrc" alt="" title="选择底图" @click="layersSelectClick" />
		<div v-show="layersSelectShow" class="layers-select">
			<i class="el-icon-close" @click="layersSelectClick"></i>
			<div class="layers-select-title">底图</div>
			<ul>
				<li v-for="(item, index) in layersList" :key="index" class="layers-select-li" :class="{ liSelected: index === currentLayerIndex }" @click="changeLayer(index, item.option)">
					<img :src="item.img" alt="" />
					<p>{{ item.option.name }}</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			layerSelectImgSrc: 'images/layerSelect.png',
			layersSelectShow: false,
			currentLayerIndex: 4,
			layersList: [
				{
					img: 'images/中国地图彩色版.png',
					option: {
						type: 'wmts',
						name: '中国地图彩色版',
						url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/WMTS',
						layer: 'ChinaOnlineCommunity',
						tileMatrixSetID: 'default028mm'
					}
				},
				{
					img: 'images/中国地图暖色版.png',
					option: {
						type: 'wmts',
						name: '中国地图暖色版',
						url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetWarm/MapServer/WMTS',
						layer: 'ChinaOnlineStreetWarm',
						tileMatrixSetID: 'default028mm'
					}
				},
				{
					img: 'images/中国地图蓝黑版.png',
					option: {
						type: 'wmts',
						name: '中国地图蓝黑版',
						url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/WMTS',
						layer: 'ChinaOnlineStreetPurplishBlue',
						tileMatrixSetID: 'default028mm'
					}
				},
				{
					img: 'images/中国地图灰色版.jpg',
					option: {
						type: 'wmts',
						name: '中国地图灰色版',
						url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetGray/MapServer/WMTS',
						layer: 'ChinaOnlineStreetGray',
						tileMatrixSetID: 'default028mm'
					}
				},
				{
					img: 'images/谷歌影像地图.png',
					option: {
						type: 'urlTemp',
						name: '谷歌影像地图',
						url: 'http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali'
					}
				}
			]
		}
	},
	methods: {
		startFun() {
			this.$earth.addToolbarButton()
			this.$earth.addPlanePath()
		},
		ClearPlan() {
			this.$earth.removePlane()
		},
		ClearTool() {
			this.$earth.removeToolbarButton()
		},
		layersSelectClick() {
			this.layersSelectShow = !this.layersSelectShow
			if (this.layersSelectShow) {
				this.layerSelectImgSrc = 'images/layerSelected.png'
			} else {
				this.layerSelectImgSrc = 'images/layerSelect.png'
			}
		},
		changeLayer(index, option) {
			this.currentLayerIndex = index
			this.$earth.changeBaseLayer(option)
			this.layersSelectClick()
		}
	}
}
</script>

<style lang="scss" scoped>
.BaseimgPicker {
	.layer-select-img {
		width: 30px;
		position: absolute;
		bottom: 0px;
		right: 0px;
		z-index: 1;
		cursor: pointer;
		margin: 3px;
	}
	.layers-select {
		width: 250px;
		height: 400px;
		position: absolute;
		bottom: 36px;
		right: 8px;
		z-index: 1;
		background: #222222;
		color: #bdbdbd;
		.el-icon-close {
			position: absolute;
			top: 0px;
			right: 6px;
			line-height: 30px;
			cursor: pointer;
		}
		.layers-select-title {
			height: 30px;
			background: #333333;
			line-height: 30px;
			text-align: center;
			font-size: 14px;
		}
		.layers-select-li {
			display: inline-block;
			width: 42%;
			margin: 10px;
			font-size: 14px;
			cursor: pointer;
			img {
				width: 100px;
			}
			p {
				margin-top: 3px;
				text-align: center;
			}
		}
		.liSelected {
			color: #00dcff;
		}
	}
}
</style
>>
